<template>
    <view class="followRecords">
        <uni-nav-bar fixed left-icon="left" @clickLeft="backHandle" title="跟进记录" class="unibarS">
        </uni-nav-bar>
        <template v-if="list.length">
            <view class="list">
                <view class="trends" v-for="item in list" :key="item.id">
                    <view class="trends-state">
                        <view>{{ item.followupTime }}</view>
                        <view>{{ bus_followup_type[item.followupType] }}</view>
                    </view>
                    <view class="trends-name">
                        <view class="trends-avatar">
                            <u-avatar class="avatar" size="40" :src="item.avatar"></u-avatar>
                            <text>{{ item.staffName }}</text>
                        </view>
                    </view>
                    <view class="trends-describe">{{ convert(item.dynamicData) }}</view>
                    <view class="trends-time">
                        <view style="margin-right: 150rpx;">
                            <u-icon name="clock" color="#677585" size="20"></u-icon>
                            <text>{{ item.createTime }}</text>
                        </view>
                        <view>
                            <u-icon name="chat" color="#677585" size="20"></u-icon>
                            <text>{{ item.commentNumber }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <uni-load-more :status="status" />
        </template>
        <template v-else>
            <empty-view />
        </template>
    </view>
</template>

<script>
import { convertToDict } from '@/common/utils'
export default {
    data() {
        return {
            // 跟进类型
            bus_followup: [],
            bus_reminder_method: null,
            params: {
                customerId: null,
                pageNum: 1,
                pageSize: 20
            },
            total: 0,
            status: 'loading',
            refresh: false,
            list: []
        }
    },
    onLoad(options) {
        // 跟进类型
        this.bus_followup = JSON.parse(uni.getStorageSync('bus_followup_type'))
        this.bus_followup_type = convertToDict(this.bus_followup)
        if (options.customerId) {
            this.params.customerId = options.customerId
            this.getData()
        }
    },
    onReachBottom() {
        console.log('上拉加载onReachBottom')
        if (this.status == 'noMore' || this.status == 'loading') return
        this.params.pageNum = this.params.pageNum + 1
        this.status = 'loading'
        this.getData()
    },
    methods: {
        getData() {
            this.$http.get('/app/followup_record/recordList', this.params).then(res => {
                if (res.code == 200) {
                    this.list = [...this.list, ...res.rows]
                    this.total = res.total
                    if (this.total > this.list.length) {
                        console.log('有更多数据')
                        this.status = 'more'
                    } else {
                        console.log('没更多数据')
                        this.status = 'noMore'
                    }
                    if (this.refresh) {
                        uni.stopPullDownRefresh()
                    }
                } else {
                    uni.$u.toast(res.msg)
                }
            })
        },
        convert(value) {
            if (!value) return ''
            let list = JSON.parse(value)
            return list.filter(item => item.content).map(item => item.content).join(';')
        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
.trends {
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 32rpx;
    padding: 32rpx;

    .trends-state {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        font-weight: 500;
        margin-bottom: 28rpx;

        >view:nth-child(1) {
            color: rgba(103, 117, 133, 1);
        }

        >view:nth-child(2) {
            color: rgba(12, 16, 25, 1);
        }
    }

    .trends-name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 28rpx;

        .trends-avatar {
            flex: 1;
            display: flex;
            align-items: center;

            text {
                margin-left: 16rpx;
                font-size: 30rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
            }

        }

        .trends-customer {
            margin-left: 20rpx;
            max-width: 300rpx;
            text-align: right;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
            // 超出隐藏
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .trends-describe {
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
        margin-bottom: 10rpx;
    }

    .trends-time {
        display: flex;

        >view {
            display: flex;
            align-items: center;
        }

        text {
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
            margin-left: 8rpx;
        }
    }
}
</style>